Next.js 简介

概述

Next.js 是一个基于 React 的轻量级框架，用于构建现代化的 Web 应用程序。它提供了许多开箱即用的功能，如服务器端渲染（SSR）、静态站点生成（SSG）、自动代码分割、路由系统等。Next.js 的目标是简化开发流程，同时提供高性能和良好的用户体验。

为什么选择 Next.js？

1. 服务器端渲染（SSR）

优点: 提高首屏加载速度，改善 SEO。
适用场景: 需要快速展示内容的页面，如博客、新闻网站。

2. 静态站点生成（SSG）

优点: 生成静态 HTML 文件，提高页面加载速度和安全性。
适用场景: 内容不经常变化的页面，如文档、产品页面。

3. 自动代码分割

优点: 按需加载页面组件，减少初始加载时间。
适用场景: 大型应用，减少用户等待时间。

4. 内置路由系统

优点: 无需额外配置，简化路由管理。
适用场景: 所有类型的 Web 应用。

5. 丰富的插件生态

优点: 社区活跃，扩展性强。
适用场景: 需要特定功能的应用，如国际化、图像优化等。

安装与环境搭建

1. 安装 Node.js

确保你的系统上安装了 Node.js（建议版本 14.x 或更高）。
你可以通过 Node.js 官网下载并安装。

2. 创建 Next.js 项目

使用 create-next-app 命令创建一个新的 Next.js 项目。

npx create-next-app my-next-app
cd my-next-app

3. 启动开发服务器

npm run dev

打开浏览器，访问 http://localhost:3000，你应该能看到默认的 Next.js 欢迎页面。

创建第一个 Next.js 应用

1. 项目结构

pages/: 存放页面组件，每个文件对应一个路由。
public/: 存放静态资源，如图片、字体等。
styles/: 存放全局样式文件。

2. 创建页面

在 pages/ 目录下创建一个新的文件 about.js。

// pages/about.js
export default function About() {
  return <div>关于我们</div>;
}

访问 http://localhost:3000/about，你应该能看到“关于我们”的页面。

3. 添加样式

在 styles/ 目录下创建一个新的文件 About.module.css。

/* styles/About.module.css */
.container {
  padding: 20px;
  background-color: #f0f0f0;
}

在 about.js 中引入并使用样式。

// pages/about.js
import styles from '../styles/About.module.css';

export default function About() {
  return <div className={styles.container}>关于我们</div>;
}

实践练习

1. 创建多个页面

创建 pages/contact.js 和 pages/services.js，并添加简单的内容。

2. 添加导航链接

在 pages/index.js 中添加导航链接，使用 <Link> 组件。

// pages/index.js
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>欢迎来到 Next.js 教程</h1>
      <ul>
        <li><Link href="/about">关于我们</Link></li>
        <li><Link href="/contact">联系我们</Link></li>
        <li><Link href="/services">服务</Link></li>
      </ul>
    </div>
  );
}

3. 添加全局样式

在 styles/globals.css 中添加全局样式，如字体、颜色等。

/* styles/globals.css */
body {
  font-family: Arial, sans-serif;
  color: #333;
}

总结

通过本教程，你已经了解了 Next.js 的基本概念、安装步骤以及如何创建和样式化页面。Next.js 提供了强大的功能和灵活的开发体验，适合各种类型的 Web 应用开发。接下来，你可以继续学习更高级的主题，如服务器端渲染、静态站点生成、数据获取等。

下一步

学习页面和路由: 深入了解 Next.js 的路由系统。
探索数据获取方法: 学习如何使用 getServerSideProps、getStaticProps 和 getStaticPaths 获取数据。
优化性能: 了解如何通过代码分割和静态生成提高应用性能。

希望你能继续探索 Next.js 的强大功能，构建出优秀的 Web 应用！

← Previous: 01. 基础入门 Next: Next.js 环境搭建教程 →